<template>
  <view class="svg-icon" :style="{ width: size + 'px', height: size + 'px' }">
    <!-- 浏览图标 -->
    <text 
      v-if="name === 'view'"
      style="font-size: 100%; color: #6b7280;"
    >👁️</text>
    
    <!-- 收藏图标 -->
    <image 
      v-else-if="name === 'save'"
      src="/static/icons/save.png" 
      mode="aspectFit"
      :style="{ width: '100%', height: '100%' }"
    />
    
    <!-- 收藏图标(激活状态) -->
    <image 
      v-else-if="name === 'save2'"
      src="/static/icons/save2.png" 
      mode="aspectFit"
      :style="{ width: '100%', height: '100%' }"
    />
    
    <!-- 点赞图标 -->
    <image 
      v-else-if="name === 'like'"
      src="/static/icons/like.png" 
      mode="aspectFit"
      :style="{ width: '100%', height: '100%' }"
    />
    
    <!-- 点赞图标(激活状态) -->
    <image 
      v-else-if="name === 'like2'"
      src="/static/icons/like2.png" 
      mode="aspectFit"
      :style="{ width: '100%', height: '100%' }"
    />
  </view>
</template>

<script setup lang="ts">
interface Props {
  name: string
  color?: string
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  color: '#6b7280',
  size: 24
})
</script>

<style lang="scss" scoped>
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
